<template>
	<view class="lottery" v-if="show">
		<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/lottery-bg.jpg" mode="widthFix" class="bg"></image>
		<view class="record" @click="record">中奖记录</view>
		<view class="lottery-times">剩余{{times}}次机会</view>
		<view class="lottery-box">
			<view  :animation="animationData" class="lottery-bg">
				<image :src="turntableBg" class='lottery-img'></image>
				<view class="canvas-list">
					<view class="canvas-item" v-for="(data,index) in awardsList" :key="index">
						<view class="canvas-item-text" :style="{
							'-webkit-transform': 'rotate('+data.turn+')',
							'transform': 'rotate('+data.turn+')'
						}">
							<view :class='data.icon?"":"none"'>{{data.award}}</view>
							<view v-if="data.icon" class="prize_img"><image :src="data.icon" mode="aspectFill"></image></view>
						</view>
					</view>
				</view>
			</view>
			<view @click="$u.throttle(getLottery,2000)" class="lottery-btn"><image :src="turntableBtn"></image></view>
		</view>
		<view class="lottery-rule">
			<view class="lottery-rule-tit">抽奖规则</view>
			<view class="lottery-rule-box">
				<view class="ul">
					<view class="li">
						<text>1.</text>
						<rich-text :nodes="rule1"></rich-text>
					</view>
					<view class="li">
						<text>2.</text>
						<rich-text :nodes="rule2"></rich-text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 中奖弹窗 -->
		<uni-popup type="center" ref="lotteryPop">
			<view class="lottery-result">
				<view class="lottery-result-pic"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/result-ico.png"></image></view>
				<view class="lottery-result-tit"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-6.png"></image></view>
				<view class="lottery-result-subtit">{{lotteryResult.name}}</view>
				<view class="lottery-result-img">
					<image :src="lotteryResult.prize_img"></image>
				</view>
				<view class="lottery-result-btn">
					<view class="coupon" v-if="lotteryResult.type==0">代金券已存入账户，下单即可使用</view>
					<view class="entity" v-if="lotteryResult.type==1">
						<view class="again" @click="again">继续抽奖</view>
						<view class="address" @click="goForm">填写收货地址</view>
					</view>
				</view>
			</view>
			<view class="close" style="text-align: center; margin-top: 20rpx;" @click="closePop">
				<u-icon name="close-circle" size="80" color="#FFF"></u-icon>
			</view>
		</uni-popup>
		
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				rule1: '<p>活动期间<span style="color: #FF7E57;">预存货款即可获得抽奖名额</span></p><p>预存货款 <span style="text-decoration: underline; color: #0D96BB;">10000元</span>可获得<span style="text-decoration: underline; color: #0D96BB;">1次抽奖名额</span>，<span style="text-decoration: underline; color: #0D96BB;">20000元</span>可获得<span style="text-decoration: underline; color: #0D96BB;">2次抽奖名额</span>，依次类推</p>',
				rule2: '<p>活动期间<span style="color: #FF7E57;">下单即可获得抽奖名额</span></p><p>活动期间单笔订单额达到 <span style="text-decoration: underline; color: #0D96BB;">10000元</span>即可获得<span style="text-decoration: underline; color: #0D96BB;">1次抽奖名额</span>，<span style="text-decoration: underline; color: #0D96BB;">20000元</span>可获得<span style="text-decoration: underline; color: #0D96BB;">2次抽奖名额</span>，依次类推</p>',
				turntableBg: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/turntableBg.png',
				turntableBtn: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/turntableBtn.png',
				awardsList: [],
				animationData: {},
				runDegs: '',
				awardsConfig: {},
				is_lottery: false,
				times: 0,
				lotteryResult: ''
			};
		},
		onReady() {
			this.init()
		},
		methods: {
			init(){
				this.$u.api.LotteryIndex().then(res => {
					this.show = true
					this.times = res.datas.usenums
					this.awardsConfig.awards = [];
					for (let i in res.datas.gift){
						this.awardsConfig.awards.push({
							'index': i,
							'name': res.datas.gift[i].prize,
							'icon': res.datas.gift[i].prize_img,
							'id': res.datas.gift[i].id
						})
					}
					var awardsConfig = this.awardsConfig.awards,
						len = awardsConfig.length,
						awardsList = [],
						turnNum = 1 / len
					for (var i = 0; i < len; i++) {
						awardsList.push({ turn: i * turnNum + 'turn', award: awardsConfig[i].name, icon: awardsConfig[i].icon, });
					}
					this.awardsList = awardsList
				})
			},
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			getLottery(){
				if(this.is_lottery){
					return
				}
				this.is_lottery = true
				if(this.times > 0){
					this.times--
				}else{
					return uni.showToast({
						icon: 'none',
						title: '您的抽奖次数已用完'
					})
				}
				if(this.lotteryResult){
					this.lotteryResult = ''
				}
				this.$u.api.LotteryFunc().then(res => {
					this.addFoot('点击抽奖')
					var that = this
					var awardIndex = 0;
					this.awardsConfig.awards.forEach((item, index) => {
						if (item.id == res.datas.awards) {
							awardIndex = index;
							this.runDegs = this.runDegs || 0
							this.runDegs = this.runDegs + (360 - this.runDegs % 360) + (360 * this.awardsConfig.awards.length - awardIndex * (360 / this.awardsConfig.awards.length))
							var animationRun = uni.createAnimation({
								duration: 4000,
								timingFunction: 'ease'
							})
							this.animationRun = animationRun
							animationRun.rotate(this.runDegs).step()
							this.animationData = animationRun.export()
							setTimeout(() => {
								this.is_lottery = false
								switch (res.datas.awards){
									case 8:
										uni.showToast({
											icon: 'none',
											title: '很遗憾，本次未中奖，下次再接再厉~!'
										})
										break;
									default:
										this.lotteryResult = res.datas
										this.$refs.lotteryPop.open()
										break;
								}
							},4000)
						}
					})
				}).catch(() => {
					this.is_lottery = false
				})
			},
			again(){
				this.$refs.lotteryPop.close()
			},
			record(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/record'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('中奖记录')
				}
			},
			goForm(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/record?rid='+this.lotteryResult.rid
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('抽奖-填写地址')
				}
			},
			closePop(){
				this.$refs.lotteryPop.close()
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #B2F9FF;
	}
	.lottery{
		padding-bottom: 70rpx;
		.record{
			position: absolute;
			right: 0;
			top: 260rpx;
			color: #FFF;
			line-height: 60rpx;
			border-radius: 30rpx 0 0 30rpx;
			background: linear-gradient(0deg, rgba(227, 72, 27, 1),rgba(255, 126, 87, 1));
			font-size: 30rpx;
			padding: 0 30rpx;
		}
		image.bg{
			width: 100%;
		}
		.lottery-times{
			position: absolute;
			top: 270rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 28rpx;
			color: #0D96BB;
			font-weight: bold;
		}
		.lottery-rule{
			width: 655rpx;
			margin: 0 auto;
			.lottery-rule-tit{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #0D96BB;
				font-weight: bold;
				&::before{
					background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/adorn-left.png);
					content: '';
					margin-right: 30rpx;
					width: 52rpx;
					height: 17rpx;
					background-size: cover;
					background-repeat: no-repeat;
				}
				&::after{
					background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/adorn-right.png);
					content: '';
					margin-left: 30rpx;
					width: 52rpx;
					height: 17rpx;
					background-size: cover;
					background-repeat: no-repeat;
				}
			}
			.lottery-rule-box{
				background: #19ACCF;
				box-shadow: -5rpx -4rpx 29rpx 0px rgba(255, 221, 239, 0.38), 3px 3px 15px 0px rgba(78, 253, 228, 0.4) inset;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 50rpx;
				.ul{
					background-color: #FFF;
					border-radius: 20rpx;
					padding: 30rpx;
					.li{
						display: flex;
						margin-bottom: 30rpx;
						line-height: 48rpx;
						&:last-child{
							margin-bottom: 0;
						}
						rich-text{
							flex: 1;
							min-width: 0;
							font-size: 26rpx;
							color: #142F35;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.lottery-result{
			width: 600rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			text-align: center;
			padding: 30rpx;
			border: 6rpx solid #CAFBFF;
			.lottery-result-pic{
				text-align: center;
				image{
					vertical-align: top;
					width: 326rpx;
					height: 212rpx;
					margin-top: -122rpx;
				}
			}
			.lottery-result-tit{
				text-align: center;
				margin-top: 40rpx;
				image{
					width: 296rpx;
					height: 55rpx;
				}
			}
			.lottery-result-subtit{
				color: #333;
				font-size: 32rpx;
				margin-top: 40rpx;
				font-weight: bold;
			}
			.lottery-result-img{
				margin-top: 20rpx;
				image{
					width: 300rpx;
					height: 300rpx;
				}
			}
			.lottery-result-btn{
				margin-top: 20rpx;
				.entity{
					display: flex;
					align-items: center;
					.address,.again{
						flex: 1;
						min-width: 0;
						text-align: center;
						background-color: #19ACCF;
						color: #FFF;
						border-radius: 10rpx;
						line-height: 70rpx;
						font-size: 24rpx;
					}
					.again{
						margin-right: 20rpx;
						background-color: #FF7C56;
					}
				}
				.coupon{
					text-align: center;
					color: #19ACCF;
					border-radius: 10rpx;
					line-height: 70rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	/* 转盘 */
	.lottery-box{ 
		width: 650rpx; 
		height: 650rpx; 
		margin: 0 auto;
		border-radius: 50%; 
		overflow: hidden;
		position: absolute;
		top: 337rpx;
		left: 50%;
		transform: translateX(-50%);
		.lottery-bg{ 
			position: absolute; 
			width: 650rpx; 
			height: 650rpx; 
			left: 0; 
			top: 0; 
			z-index: 1; 
			background-clip: padding-box;
		}
		.lottery-img{
			width: 650rpx; 
			height: 650rpx;
		}
		.canvas-list{
			position: absolute; 
			left: 0; 
			top: 0; 
			width: 650rpx; 
			height: 650rpx; 
			z-index: 9999; 
		}
		.canvas-item{
			position: absolute; 
			left: 0; 
			top: 0; 
			width: 100%; 
			height: 100%; 
			font-weight: 600; 
			text-shadow: 0 1px 1px rgba(255,255,255,.6);
			overflow:hidden;
		}
		.canvas-item-text {
			position: relative;
			display: block; 
			margin: 0 auto; 
			text-align: center; 
			transform-origin: 50% 325rpx; 
			font-size: 24rpx; 
			padding-top: 95rpx; 
			color: #947600;
			view{
				image{
					width: 80rpx;
					height: 80rpx; 
					margin-top: 10rpx;
				}
			}
			view.no{
				padding-top: 20rpx;
			}
		}
		.lottery-btn{
			position: absolute; 
			top: 50%; 
			left: 50%; 
			transform: translate(-50%,-50%); 
			z-index: 10; 
			width: 212rpx; 
			height: 228rpx;
			image{
				width: 212rpx; 
				height: 228rpx;
			}
		}
	}
	/* 转盘 */ 
</style>
